<template>
	<view class="dmm-device-types">
		<view class="row" @click="visible = true">
			<text class="text-primary">{{device.name}}</text>
			<image src="../../static/imgs/icon_right_arrow.png" mode=""></image>
		</view>
		
		<u-action-sheet :actions="actions" :closeOnClickOverlay="true" :closeOnClickAction="true"  :show="visible" cancelText="取消" @close="visible = false" @select="selectAction"></u-action-sheet>
	</view>
	
</template>

<script>
	import {deviceTypeList} from '@/common/constants.js'
	
	export default {
		name:"cl-device-types",
		
		props: {
			defaultDeviceType: {
				type: Object,
				default: function () {return {name: '台卡', id: '00'}}
			}
		},
		
		data() {
			return {
				visible: false,
				actions: deviceTypeList,
				device: this.defaultDeviceType
			};
		},
		
		computed: {
		},
		
		methods: {
			selectAction: function(item) {
				this.device = item
				this.$emit('select', item)
			},
		}
	}
</script>

<style lang="scss">
.dmm-device-types {
	text {
		margin-right: 8rpx;
		font-size: 34rpx;
		font-weight: 700;
	}
	image {
		height: 24rpx;
		width: 18rpx;
	}
}
	
.u-popup {
	/deep/ .u-popup__content {
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
		
		.u-action-sheet__description {
			font-size: 28rpx;
			color: $uni-text-color-muted;
		}
		.u-gap {
			height: 20rpx;
			background-color: $u-bg-color;
		}
	}
}
</style>
